<template>
  <div class="myTable" >
    <el-row class="searchRow">
      <el-select v-model="type" placeholder="请选择" clearable style="margin-right: 15px">
        <el-option
            v-for="item in categories"
            :key="item.type"
            :label="item.name"
            :value="item.type">
        </el-option>
      </el-select>
      <el-button type="success" @click="query(1)">查询</el-button>
      <el-button  type="default" @click="clear()" >重置</el-button>

      <el-button type="primary" class="pull-right" icon="el-icon-plus" @click="showEdit()" >添加</el-button>
    </el-row>

    <el-table :data="tableData.data" class="mt20" :show-header="true" :header-row-class-name="'tableHead'" :header-cell-class-name="'tableHeadCell'">
      <el-table-column  type="index" label="NO" width="60px" :index="indexMethod"></el-table-column>
      <el-table-column label="事项名称"  prop="integrationName">  </el-table-column>
      <el-table-column  label="图标" >
        <template slot-scope="scope">
          <div class="bgBlue imgDiv">
            <img :src="scope.row.iconUrl" class="imgIcon"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column  label="流程图" >
        <template slot-scope="scope">
          <img :src="scope.row.url" class="biggerImg zoomIn" @click="showPic(scope.row.url)"/>
        </template>
      </el-table-column>
      <el-table-column label="事项分类" width="240px" prop="type" ></el-table-column>
      <el-table-column label="修改时间" width="220px" prop="updateTime"></el-table-column>
      <el-table-column  label="操作" width="120px">
        <template slot-scope="scope">
        <span style="white-space: nowrap">
            <el-button type="primary" icon="el-icon-edit" size="mini"	@click="showEdit(scope.row)" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row)" circle></el-button>
        </span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="query" style="margin-top: 25px"
                   layout="total,prev, pager, next" :total="tableData.rowsCount" background :page-size="tableData.pageSize"> </el-pagination>

    <el-dialog   width="60%"   :title='(copy.id?"修改":"添加")+"服务"'     :visible.sync="dialogVisible"
        >
      <el-form ref="copy" :model="copy" label-width="80px">
        <el-form-item label="事项名称">
          <el-input v-model="copy.integrationName" placeholder="请输入事项名称"></el-input>
        </el-form-item>
        <el-form-item label="事项分类">
          <el-select v-model="copy.type" placeholder="请选择">
            <el-option    v-for="item in categories" :key="item.type" :label="item.name" :value="item.type" ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="图标">
          <el-upload
              class="avatar-uploader"
              action="/yczmq/common/uploadFile"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="copy.iconUrl" :src="copy.iconUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="流程图">
          <el-upload
              class="avatar-uploader"
              action="/yczmq/common/uploadFile"
              :show-file-list="false"
              :on-success="handleUrlSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="copy.url" :src="copy.url" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                 <el-button type="primary" @click="save()">确 定</el-button>
            </span>
    </el-dialog>

    <el-dialog   width="60%" :fullscreen=false :visible.sync="picDialogVisible">
      <img class="alignCenter" :src="picDialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  /* eslint-disable no-unused-vars */

  const categories = [{type:"",name:"全部"},{type:"市场准入类",name:"市场准入类"},{type:"国际贸易类",name:"国际贸易类"},{type:"建设项目类",name:"建设项目类"},{type:"公共服务类",name:"公共服务类"}]

  export default {
    name: "judgeService",
    data: function() {
      return {
        categories: categories,
        type:"",
        tableData: {},
        dialogVisible:false,
        copy:{iconUrl:"",integrationName:"",type:"",url:""},
        picDialogVisible:false,
        picDialogImageUrl:""
      }
    },
    methods:{
      indexMethod:function(index){
        return (this.tableData.curPageNO-1)*10+index+1;
      },
      query:function(pageNo){
        let vm = this;
        let params = {
          curPageNO:pageNo||vm.tableData.curPageNO,
          pageSize:10,
          type:vm.type,
        }
        this.$http.post("/yczmq/bigScreen/integration/page",window.changeDataType(params)).then(resp => {
          if(resp.status == 0){
            vm.tableData = resp.data;
          }
        })
      },
      clear(){
        this.type = "";
      },
      del:function(item){
        let vm = this;
        confirm(this,'确认删除此记录?',()=>{
          this.$http.get("/yczmq/integration/delete/{id}".replace("{id}",item.id)).then(resp => {
            if (resp.status == 0) {
              window.msg(vm,"删除成功:"+item.integrationName);
              vm.query();
            }
          })
        })
      },
      showEdit: function (item) {
        let vm = this;
        if (item) {
          vm.copy.id = item.id;
          vm.copy.integrationName = item.integrationName;
          vm.copy.type = item.type;
          vm.copy.iconUrl = item.iconUrl;
          vm.copy.url = item.url;
          // Object.assign(vm.copy, item);
        }else{
          vm.copy.integrationName = "";
          vm.copy.type = "";
          vm.copy.iconUrl = "";
          vm.copy.url = "";
        }
        vm.dialogVisible = true;
      },
      handleAvatarSuccess(res, file) {
        this.copy.iconUrl = "/yczmq"+res.data.url;
        this.$forceUpdate();
        //URL.createObjectURL(file.raw);
      },
      handleUrlSuccess(res, file) {
        this.copy.url = "/yczmq"+res.data.url;
        this.$forceUpdate();
        //URL.createObjectURL(file.raw);
      },
      showPic(url){
        this.picDialogVisible = true;
        this.picDialogImageUrl = url;
      },
      beforeAvatarUpload(file) {
        //const isJPG = file.type === 'image/jpeg';
        const isJPG = file.type.startsWith("image");
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('请上传图片!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      save:function() {
        let vm = this;
        vm.$http.post("/yczmq/integration/saveOrEdit",vm.copy).then(resp=>{
          if(resp.status == 0){
            this.dialogVisible = false;
            vm.query();
          }
        })
      }
    },
    created(){
      this.query(1);
    }
  }
</script>
<style scoped>
  .bgBlue{
    background: #53b4f9;
  }
  .imgDiv{
    height: 80px;
    width: 80px;
    line-height: 80px;
    border-radius: 8px;
    text-align: center;
  }
  .imgDiv img{
    vertical-align: middle;
  }
  .biggerImg{
    max-height: 80px;
  }
</style>